{extend name="public/layout"/}
{block name="title"}首页_{:web_config('web_title')}{/block}
{block name="keywords"}{:web_config('web_keywords')}{/block}
{block name="description"}{:web_config('web_description')}{/block}
{block name="head"}
<style>
  html, body {position: relative;height: 100%;}
  body {background: #efefef;}
  .img-news-list .news-item{
    height: 275px!important;
    margin-bottom: 10px;
  }
  .img-news-list .news-item .news-title{
    height: 45px!important;
    line-height: 45px;
    padding: 0 0 0 10px;

  }
  .index-page-4 .product-list .product-item .news-title{
    height: 45px!important;
    line-height: 45px;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px 0 10px;
  }
</style>
{/block}
{block name="body"}
{include file="public/index_header" /}
<div class="swiper-container index-page" id="index-page">
  <div class="swiper-wrapper">
    <div class="swiper-slide page-slide">
      <div class="page-content index-page-1">
        <div class="omy-01">
          <img src="http://res.tyomy.cn/upload/20200525/a451e3aa2d83af15dcb219f9da0ae2ac.png" alt="">
          <div class="height-10"></div>
          <p class="font-size18 line-height30">{:patch('首页标题')}</p>
        </div>
        <div class="contact-box">
          手机：{:web_config('web_mobile')}<br>
          电话：{:web_config('web_phone')}<br>
          传真：{:web_config('web_fax')}<br>
        </div>
        <div class="case-box">
          <div class="swiper-container" id="case-big">
            <div class="swiper-wrapper">
              {volist name=":patch('首页轮播图')" id="vo"}
              <div class="swiper-slide">
                <div class="case-item">
                  <div class="case-name">{$vo.s1}</div>
                  <div class="case-img" style="background-image:url({$vo.file_url})"></div>
                </div>
              </div>
              {/volist}
            </div>
            <div class="case-swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page-slide">
      <div class="page-content">
        <div class="index-page-2">
          <div class="left-box" style="background-image:url({:patch('首页关于我们左侧图')})"></div>
          <div class="right-box">
            <div class="omy-01">
              <img src="http://res.tyomy.cn/upload/20200525/a451e3aa2d83af15dcb219f9da0ae2ac.png" alt="">
            </div>
            <div class="height-30"></div>
            <div class="class-name">
              <p class="font-size18 line-height24 font-upp" style="color:#aaaeb7">Company profile</p>
              <p class="font-size16 line-height24">公司简介</p>
            </div>
            <div class="height-30"></div>
            <div class="about-box font-size14 line-height30 text-justify" style="padding-right:100px;">
              {:web_config('web_description')}
            </div>
            <div class="height-50"></div>
            <a href="/home/cms/items.html?class_id=29" class="more-link">查看更多</a>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page-slide">
      <div class="page-content">
        <div class="index-page-3">
          <div class="news-header">
            <div class="class-name">
              <p class="font-size18 line-height24 font-upp" style="color:#aaaeb7">PRODUCT DISPLAY</p>
              <p class="font-size16 line-height24">产品中心</p>
            </div>
          </div>
          <div class="height-20"></div>
          <div class="news-list">
            <ul class="mc-avg-sm-3 mc-avg-between-lg img-news-list">
              {volist name=":D('cms.Product')->where('is_recommend',1)->limit(6)->select()" id="vo"}
              <li>
                <a href="/home/cms/info.html?id={$vo.id}&class_id={$vo.class_id}" class="news-item">
                  <div class="news-thumb" style="background-image:url({$vo.thumb});"></div>
                  <div class="news-title">{$vo.title}</div>
                </a>
              </li>
              {/volist}
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page-slide">
      <div class="page-content">
        <div class="index-page-4">
          <div class="product-header">
            <div class="class-name">
              <p class="font-size18 line-height24 font-upp" style="color:#aaaeb7">NEWS CENTER</p>
              <p class="font-size16 line-height24">新闻资讯</p>
            </div>
          </div>
          <div class="height-40"></div>
          <div class="product-box">
            <div class="left-box">
              <img src="{:patch('首页产品中心左侧图')}" alt="">
              <div class="product-cate-list font-size14" style="font-size: 18px !important;line-height: 30px; letter-spacing: 3px;">
                优选澳洲松木，MDI环保胶水，易加工不费材，可根据客户需求，定制生产不同规格性能的板材。
              </div>
            </div>
            <div class="product-list">
              <ul class="mc-avg-sm-1 mc-avg-md-1 mc-avg-lg-2  mc-avg-between-lg class-list class-list-34">
                {volist name="new_list" id="vo"}
                <li>
                  <a href="/home/cms/info.html?id={$vo.id}&class_id={$vo.class_id}" class="product-item">
                    <div class="news-thumb" style="background-image:url({$vo.thumb});"></div>
                    <div class="news-title">{$vo.title}</div>
                  </a>
                </li>
                {/volist}
              </ul>
              </ul>
              <div class="text-right">
                <a href="/home/cms/items.html?class_id=26" class="more-link">查看更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="index-swiper-pagination"></div>
</div>
{include file="public/index_footer" /}
{/block}
{block name="script"}
<script>
  Do('swiper', function (){
    var index_page = new Swiper('#index-page', {
      direction: 'vertical',
      mousewheel: true,
      pagination: {
        el: '.index-swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' +'0'+ (index + 1) + '</span>';
        },
      },
    });
    var case_big = new Swiper('#case-big', {
      slidesPerView: 'auto',
      loop: true,
      pagination: {
        el: '.case-swiper-pagination',
        clickable: true,
      },
      nested:true,
    });
  });
  function changeClass(obj) {
    var id = $(obj).data('id');
      $('.class-list').hide();
      $('.class-list-' + id).show();
  }
</script>
{/block}